<template>
  <PageWrapper title="">
    <XGrid 
    ref="xGrid"
    :stripe="true"
    :columns="columns"
    :query-params="formConditionData.data"
    :query-api="getTableData"
    :deletes-api="deletes"
    @create="drawer.data.show = true"
    @edit="handleEdit"
    @reset-password="handleResetPassword"
    >
    <template #form>
      <vxe-form :data="formConditionData.data" title-colon collapse-status>
        <vxe-form-item title="员工">
          <template #default="{ data }">
            <vxe-input
            v-model="data.word" clearable
              prefix-icon="vxe-icon-search"
              placeholder="账号|姓名|电话"/>
          </template>
        </vxe-form-item>
        <vxe-form-item title="启用" field="enable" :folding="false">
          <template #default="{ data }">
            <vxe-select v-model="data.enable" placeholder="请选择" clearable>
              <vxe-option :value="1" label="启用"/>
              <vxe-option :value="2" label="禁用"/>
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item align="center">
        <template #default>
            <vxe-button type="submit" status="default" icon="vxe-icon-search" @click="load" title="点击查询">查询</vxe-button>
            <a-popconfirm title="确定重置查询条件吗？" @confirm="reset">
                <vxe-button status="default" icon="vxe-icon-repeat">重置</vxe-button>
            </a-popconfirm>
        </template>
        </vxe-form-item>
      </vxe-form>
    </template>
    </XGrid>

    <Drawer
:show="drawer.data.show" :is-update="drawer.data.isUpdate"
            :row="drawer.data.row"
            @on-success="load"
            @on-drawer-close="onDrawerClose"/>
    <PasswordDrawer 
    :show="passwordDrawer.data.show" 
    :row="passwordDrawer.data.row"
    @on-success="onPasswordDrawerClose"
    @on-drawer-close="onPasswordDrawerClose"/>
  </PageWrapper>
</template>
<script lang="ts" name="User" setup>
import { reactive, ref, } from 'vue';
import Drawer from './Drawer.vue';
import { columns } from './data';
import PasswordDrawer from './password/reset.vue';
import { deletes, getTableData } from '/@/api/sys/user';
import { PageWrapper } from '/@/components/Page';
import { XGrid } from '/@/components/XGrid';

const xGrid = ref()
const formConditionData = reactive({data: {
  word: '',
  enable: null,
}})

const load = () => {
  xGrid.value.reload()
}

const reset = () => {
  Object.assign(formConditionData, {data: {}});
  xGrid.value.reload(true)
}

const drawer = reactive({data: {
  show: false,
  isUpdate: false,
  row: null,
}})

const handleEdit = (row_:any) => {
  drawer.data.show = true
  drawer.data.isUpdate = true
  drawer.data.row = row_
}

const onDrawerClose = () => {
  Object.assign(drawer, {data: {}})
}

const passwordDrawer = reactive({data: {
  show: false,
  row: null,
}})

const handleResetPassword = (row:any) => {
  passwordDrawer.data.show = true
  passwordDrawer.data.row = row
}

const onPasswordDrawerClose = () => {
  Object.assign(passwordDrawer, {data: {}})
}
</script>
